<script setup>
import { ref } from 'vue';
const activeName = ref('b');
import { useRouter } from 'vue-router'; //路由器
const router = useRouter(); //获取到 router 对象，用于编程式跳转导航
import { default as http, getImageUrl } from '@/utils/request.js';
import { onMounted } from 'vue';
import { reactive } from 'vue';
import { Dialog } from '@vant/compat';
//跳转到商品
function toGoodsView() {
    router.push("/goods");
}
// 返回上一页面
const onClickLeft = () => history.back();
// 从后端获取商品列表
const goods = reactive([
])
const getGoods = function () {
  http.get(
    '/user/buy'
  ).then((res) => {
    console.log('获取到我买出的商品列表：', res.data);
    goods.splice(0);//todo 需要将原有的元素清空
    res.data.data.forEach(message => {
      goods.push(message);
    });
    console.log('获取到的我买出商品列表ss：', goods);
  })
};
// 删除收藏商品信息
const toDelete = (goodsId) => {
  console.log("------------删除方法");
  // 二次确认删除
  Dialog({ title: '提示', message: '确认删除吗？' }).then(() => {//用户点击确定按钮
      http.delete("/user/goods/delete/"+goodsId)
        .then((res) => {
          console.log('删除返回值：', res);
          if (res.data.code === 200) {	//修改成功
           console.log("删除成功");
            getGoods;
          }
        }).catch((err) => {
          console.log('取消失败：', err);
          
        });
    })
    .catch(() => {//点击取消按钮

    });
};
//显示弹出层
const showTop = ref(false);
onMounted(() => {
  // 获取消息列表
  getGoods();
});
</script>
<template>
    <div>
        <van-nav-bar title="商品" left-text="返回" left-arrow @click-left="onClickLeft">
            <template #right>
                <van-icon name="search" size="18" />
            </template>
        </van-nav-bar>

    </div>
    <div>
        <van-tabs v-model:active="activeName">
            <van-tab title="默认" name="a"></van-tab>
            <van-tab title="降价" name="b"></van-tab>
            <van-tab title="促销" name="c"></van-tab>
        </van-tabs>

    </div>
      <!-- 商品展示 -->
  <van-swipe-cell v-for="g in goods" :key="g.id">
    <van-card to="goods" :price="(g.price)" :title="(g.goodsName)" :desc="(g.details)" :thumb="getImageUrl(g.picture)"
      thumb-link="/navbar">
      <router-link :to="{ name: 'goods' }"></router-link>
      <template #tags>
        <van-tag plain type="primary">{{ g.brand }}</van-tag>
      </template>
      <template #footer>
        <van-button size="mini" to="navbar">看相似</van-button>
        <van-button size="mini">降价通知</van-button>
        <van-button size="mini" @click="showTop = true">到货通知</van-button>

      </template>
    </van-card>
    <!-- 滑动删除 -->
    <template #right>
      <van-button square text="删除" type="danger" class="delete-button" @click="toDelete(g.goodsId)"/>
    </template>
  </van-swipe-cell>
    <!-- <div>
        <van-card num="1" tag="百宝箱" price="3999" desc="ipad 10 曜石黑 128G" title="Ipad" @click="toGoodsView"
            thumb="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F8c8bfb8b-d447-4e31-b278-2b24ee2506bd%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1701938843&t=5714ee1fdd7c12f34e86e81722706ccd">
            <template #tags>
                <van-tag plain type="primary">券后</van-tag>
            </template>
            <template #footer>
                <van-button size="mini">看相似</van-button>
                <van-button size="mini">到货通知</van-button>
            </template>
        </van-card>

    </div>
    <div>
        <van-card num="1" tag="百宝箱" price="7999" desc="iphone 14pro 深空黑 256G" title="Iphone" @click="toGoodsView"
            thumb="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Fa4c90006-7d92-4911-b158-ce5276ced71d%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1701938905&t=67692ad2002a9bb92737da2e4ebb2175">
            <template #tags>
                <van-tag plain type="primary">券后</van-tag>
            </template>
            <template #footer>
                <van-button size="mini">看相似</van-button>
                <van-button size="mini">降价通知</van-button>
            </template>
        </van-card>

    </div> -->
    <div>
        <van-nav-bar title="为您推荐" />

    </div>
    <div>
        <van-card num="1" tag="自由市场" price="6.6" desc="全新未拆封，现在特价出" title="手机支架" @click="toGoodsView" origin-price="10.00"
            thumb="http://t13.baidu.com/it/u=2980442548,208132136&fm=224&app=112&f=JPEG?w=375&h=500">
            <template #tags>
                <van-tag plain type="primary">看过来</van-tag>
            </template>
            <template #footer>
                <van-button size="mini">看相似</van-button>
            </template>
        </van-card>

    </div>
    <div>
        <van-card num="1" tag="官方验99新" price="9999" desc="徕卡相机 本人使用，购入时12999，因特殊原因现在便宜出 看上联系" title="相机"
            @click="toGoodsView" origin-price="12999"
            thumb="https://img1.baidu.com/it/u=2109145984,607437933&fm=253&fmt=auto&app=138&f=JPEG?w=751&h=500">
            <template #tags>
                <van-tag plain type="primary">相机热销NO.1</van-tag>
            </template>
            <template #footer>
                <van-button size="mini">看相似</van-button>
            </template>
        </van-card>

    </div>
    <div>
        <van-card num="1" tag="自营" price="1299" desc="劳力士手表，10月初购入，发票齐全，特价出" title="劳力士" @click="toGoodsView"
            origin-price="1599"
            thumb="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F216c522f-c2ee-4093-b637-ea976b56ec09%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1701939058&t=0e3d89cffd6a040cafba6cdd93939558">
            <template #tags>
                <van-tag plain type="primary">著名手表品牌</van-tag>
            </template>
            <template #footer>
                <van-button size="mini">看相似</van-button>
            </template>
        </van-card>

    </div>
</template>